<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <style>
        #main {
            border: 1px solid #000;
        }
    </style>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../lib/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px; height: 400px"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#main'))

        // 指定图表的配置项和数据
        const option = {
            title: {
                text: '班级薪资分布',
            },
            tooltip: {
                trigger: 'item',
            },
            // 图例
            legend: {
                bottom: '5%',
                left: 'center',
            },
            // 颜色
            color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: ['60%', '80%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2,
                },
                label: {
                    show: false,
                    position: 'center',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold',
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [{
                        value: 1048,
                        name: 'Search Engine'
                    },
                    {
                        value: 735,
                        name: 'Direct'
                    },
                    {
                        value: 580,
                        name: 'Email'
                    },
                    {
                        value: 484,
                        name: 'Union Ads'
                    },
                    {
                        value: 300,
                        name: 'Video Ads'
                    },
                ],
            }, ],
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>